<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>图表统计</title>
        <link rel="stylesheet" href="../assets/lib/bootstrap.css" />
        <link rel="stylesheet" href="../assets/lib/main.css" />
        <script src="../assets/lib/jquery.js"></script>
        <script type="text/javascript" src="../assets/lib/echarts.min.js"></script>
    </head>

    <body>
        <div class="container-fluid">
            <div class="row spannel_list">
                <div class="col-sm-3 col-xs-6">
                    <div class="spannel">
                        <em>10015</em><span>篇</span>
                        <b>总文章数</b>
                    </div>
                </div>
                <div class="col-sm-3 col-xs-6">
                    <div class="spannel scolor01">
                        <em>123</em><span>篇</span>
                        <b>日新增文章数</b>
                    </div>
                </div>
                <div class="col-sm-3 col-xs-6">
                    <div class="spannel scolor02">
                        <em>35</em><span>条</span>
                        <b>评论总数</b>
                    </div>
                </div>
                <div class="col-sm-3 col-xs-6">
                    <div class="spannel scolor03">
                        <em>123</em><span>条</span>
                        <b>日新增评论数</b>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row curve-pie">
                <div class="col-lg-8 col-md-8">
                    <div class="gragh_pannel" id="curve_show"></div>
                </div>
                <div class="col-lg-4 col-md-4">
                    <div class="gragh_pannel" id="pie_show"></div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="column_pannel" id="column_show"></div>
        </div>

        <script>
            var oChart = echarts.init(document.getElementById('curve_show'))
            var aList_all = [
                { count: 36, date: '2019-04-13' },
                { count: 52, date: '2019-04-14' },
                { count: 78, date: '2019-04-15' },
                { count: 85, date: '2019-04-16' },
                { count: 65, date: '2019-04-17' },
                { count: 72, date: '2019-04-18' },
                { count: 88, date: '2019-04-19' },
                { count: 64, date: '2019-04-20' },
                { count: 72, date: '2019-04-21' },
                { count: 90, date: '2019-04-22' },
                { count: 96, date: '2019-04-23' },
                { count: 100, date: '2019-04-24' },
                { count: 102, date: '2019-04-25' },
                { count: 110, date: '2019-04-26' },
                { count: 123, date: '2019-04-27' },
                { count: 100, date: '2019-04-28' },
                { count: 132, date: '2019-04-29' },
                { count: 146, date: '2019-04-30' },
                { count: 200, date: '2019-05-01' },
                { count: 180, date: '2019-05-02' },
                { count: 163, date: '2019-05-03' },
                { count: 110, date: '2019-05-04' },
                { count: 80, date: '2019-05-05' },
                { count: 82, date: '2019-05-06' },
                { count: 70, date: '2019-05-07' },
                { count: 65, date: '2019-05-08' },
                { count: 54, date: '2019-05-09' },
                { count: 40, date: '2019-05-10' },
                { count: 45, date: '2019-05-11' },
                { count: 38, date: '2019-05-12' },
            ]

            let aCount = []
            let aDate = []

            for (var i = 0; i < aList_all.length; i++) {
                aCount.push(aList_all[i].count)
                aDate.push(aList_all[i].date)
            }

            var chartopt = {
                title: {
                    text: '月新增文章数',
                    left: 'center',
                    top: '10',
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['新增文章'],
                    top: '40',
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        name: '日',
                        type: 'category',
                        boundaryGap: false,
                        data: aDate,
                    },
                ],
                yAxis: [
                    {
                        name: '月新增文章数',
                        type: 'value',
                    },
                ],
                series: [
                    {
                        name: '新增文章',
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: { areaStyle: { type: 'default' }, color: '#f80' },
                            lineStyle: { color: '#f80' },
                        },
                        data: aCount,
                    },
                ],
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(255,136,0,0.39)',
                            },
                            {
                                offset: 0.34,
                                color: 'rgba(255,180,0,0.25)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(255,222,0,0.00)',
                            },
                        ]),
                    },
                },
                grid: {
                    show: true,
                    x: 50,
                    x2: 50,
                    y: 80,
                    height: 220,
                },
            }

            oChart.setOption(chartopt)

            var oPie = echarts.init(document.getElementById('pie_show'))
            var oPieopt = {
                title: {
                    top: 10,
                    text: '分类文章数量比',
                    x: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                },
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
                legend: {
                    x: 'center',
                    top: 65,
                    data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
                },
                toolbox: {
                    show: true,
                    x: 'center',
                    top: 35,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548,
                                },
                            },
                        },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                calculable: true,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        center: ['50%', '65%'],
                        data: [
                            { value: 300, name: '奇趣事' },
                            { value: 100, name: '会生活' },
                            { value: 260, name: '爱旅行' },
                            { value: 180, name: '趣美味' },
                        ],
                    },
                ],
            }
            oPie.setOption(oPieopt)

            var oColumn = this.echarts.init(document.getElementById('column_show'))
            var oColumnopt = {
                title: {
                    text: '文章访问量',
                    left: 'center',
                    top: '10',
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
                    top: '40',
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月'],
                    },
                ],
                yAxis: [
                    {
                        name: '访问量',
                        type: 'value',
                    },
                ],
                series: [
                    {
                        name: '奇趣事',
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: { areaStyle: { type: 'default' }, color: '#fd956a' },
                        },
                        data: [800, 708, 920, 1090, 1200],
                    },
                    {
                        name: '会生活',
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: { areaStyle: { type: 'default' }, color: '#2bb6db' },
                        },
                        data: [400, 468, 520, 690, 800],
                    },
                    {
                        name: '爱旅行',
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: { areaStyle: { type: 'default' }, color: '#13cfd5' },
                        },
                        data: [500, 668, 520, 790, 900],
                    },
                    {
                        name: '趣美味',
                        type: 'bar',
                        barWidth: 20,
                        itemStyle: {
                            normal: { areaStyle: { type: 'default' }, color: '#00ce68' },
                        },
                        data: [600, 508, 720, 890, 1000],
                    },
                ],
                grid: {
                    show: true,
                    x: 50,
                    x2: 30,
                    y: 80,
                    height: 260,
                },
                dataZoom: [
                    //给x轴设置滚动条
                    {
                        start: 0, //默认为0
                        end: 100 - 1000 / 31, //默认为100
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        handleSize: 0, //滑动条的 左右2个滑动条的大小
                        height: 8, //组件高度
                        left: 45, //左边的距离
                        right: 50, //右边的距离
                        bottom: 26, //右边的距离
                        handleColor: '#ddd', //h滑动图标的颜色
                        handleStyle: {
                            borderColor: '#cacaca',
                            borderWidth: '1',
                            shadowBlur: 2,
                            background: '#ddd',
                            shadowColor: '#ddd',
                        },
                    },
                ],
            }
            oColumn.setOption(oColumnopt)
        </script>
    </body>
</html>
